<template>
  <div class="box">
    <van-nav-bar title="活动" left-arrow @click-left="onClickLeft" />
    <div class="header">
      <router-link class="kk" tag="div" to="kkchp"></router-link>
      <router-link class="hg" tag="div" to="hgtmx"></router-link>
      <router-link class="nc" tag="div" to="nchgt"></router-link>
      <router-link class="dw" tag="div" to="dwlx"></router-link>
      <router-link class="xr" tag="div" to="xrzl"></router-link>
      <router-link class="lr" tag="div" to="lrssz"></router-link>
      <router-link class="js" tag="div" to="jswxr"></router-link>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
.box {
  width: 100%;
  .van-nav-bar__content {
    margin: 30px 0;
  }
  .van-hairline--bottom::after {
    border: none;
  }
  .van-nav-bar {
    background-color: rgba(0, 0, 0, 0);
  }
  .van-nav-bar__text {
    color: white;
  }
  .van-nav-bar__title {
    color: white;

    font-size: 32px;
    text-align: left;
    font-family: PingFangSC-regular;
    // margin-top: 80px;
    line-height: 88px;
  }
  .van-icon-arrow-left {
    color: white;
    font-size: 48px;
  }

  .header {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    .kk,
    .hg,
    .nc,
    .dw,
    .xr,
    .lr,
    .js {
      // font-weight: 700;
      font-size: 28px;
      width: 670px;
      height: 184px;
      line-height: 184px;
      border-radius: 16px;
      background-color: rgba(206, 206, 206, 100);
      text-align: center;
      margin: 20px 40px;
    }
  }
  .kk {
    background-image: url("./img/kkchp.png");
    background-size: 110%;
  }
  .hg {
    background-image: url("./img/hgtxmg.png");
    background-size: 110%;
  }
  .nc {
    background-image: url("./img/nchgt.png");
    background-size: 110%;
  }
  .dw {
    background-image: url("./img/dwlx.png");
    background-size: 110%;
  }
  .xr {
    background-image: url("./img/xrzl.png");
    background-size: 110%;
  }
  .lr {
    background-image: url("./img/lrs.png");
    background-size: 110%;
  }
  .js {
    background-image: url("./img/jswxr.png");
    background-size: 110%;
  }
}
</style>
